<template>
  <div class="container">
    <div ref="searchRef">
      <el-form
        :inline="true"
        :model="formInline"
        class="grids gridColumns6"
        label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.name"
            placeholder="姓名"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input
            v-model="formInline.mobile"
            placeholder="联系方式"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="班级名称">
          <classQuery v-model="formInline.classId" multiple="1"></classQuery>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="formInline.identityCard"
            placeholder="身份证号"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="所在企业">
          <el-input
            v-model="formInline.enterprise"
            placeholder="所在企业名称"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="工作年限">
          <el-select
            v-model="formInline.workYears"
            placeholder="请选择累计工作年限"
            @change="onSubmit"
          >
            <el-option
              v-for="(item, index) in workYears.split(',')"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最高学历">
          <el-input
            v-model="formInline.education"
            placeholder="最高学历"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="毕业专业">
          <el-input
            v-model="formInline.graduationMajor"
            placeholder="毕业专业"
            clearable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item label="报名所属">
          <dictSelect
            v-model="formInline.affiliation"
            dictCode="registration_affiliation"
            multiple="1"
          ></dictSelect>
        </el-form-item>
        <el-form-item label="获证情况">
          <el-select
            v-model="formInline.isExamination"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="2"
            multiple
            placeholder="请选择获证情况"
            @change="onSubmit"
          >
            <el-option label="获证" :value="1" />
            <el-option label="未获证" :value="0" />
            <el-option label="缺考" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="考试性质">
          <el-select
            v-model="formInline.examType"
            placeholder="请选择考试性质"
            @change="onSubmit"
          >
            <el-option label="正考" :value="1" />
            <el-option label="补考" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>

      <el-tabs
        v-model="formInline.type"
        class="class-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="报读学员" name="current"></el-tab-pane>
        <el-tab-pane label="团体学员" name="offline"></el-tab-pane>
      </el-tabs>
    </div>

    <offlineStudents v-if="formInline.type == 'offline'"></offlineStudents>
    <el-table
      v-loading="loading"
      :data="tableParams.rows"
      v-else
      :max-height="tableHeight"
    >
      <el-table-column type="index" width="50" label="序号" fixed="left" />
      <el-table-column label="姓名" width="100" fixed="left">
        <template #default="scope">
          <div class="flex alignCenter name" @click="showUserInfo(scope.row)">
            {{ field_format(scope.row, "name") }}
            <div v-if="scope.row.source" class="source">团</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="110">
        <template #default="scope">
          {{ field_format(scope.row, "mobile") }}
        </template>
      </el-table-column>
      <el-table-column label="班级名称" width="400" show-overflow-tooltip>
        <template #default="scope">
          <div class="flex alignCenter">
            <div
              class="className"
              @click="
                proxy.$utils.toLink(
                  `/classManage/classDetails?classId=${scope.row.classId}`
                )
              "
            >
              {{ scope.row.class_Info.className }}
            </div>
            <div
              @click="
                proxy.$utils.toLink(
                  `/classManage/classDetails?classId=${scope.row.class_Info._id}`
                )
              "
              class="classStatus fz12 bold shrink"
              :class="{ active: showActive(scope.row.class_Info) }"
            >
              {{ scope.row.class_Info.status == 2 ? "结" : "读" }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="到课率" prop="name" width="100">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            v-if="scope.row.userState == 0"
            effect="dark"
            :content="`停课日期 ${scope.row.suspensionClassDate}`"
            placement="top"
          >
            <div style="color: #8530f5">停课</div>
          </el-tooltip>
          <div v-else>{{ toClassPro(scope.row) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="考试性质" prop="name" width="100">
        <template #default="scope">
          <div
            v-if="scope.row.examType == 0"
            class="bold"
            style="color: #409eff"
          >
            补考
          </div>
          <div v-else class="bold" style="color: #67c23a">正考</div>
        </template>
      </el-table-column>
      <el-table-column label="理论" prop="theory" width="80" />
      <el-table-column label="实训" prop="practicalTraining" width="80" />
      <el-table-column label="获证情况" prop="name" width="80">
        <template #default="scope">
          <div
            @click="
              proxy.$refs.uploadImageRef.showPreview(scope.row.certificateUrl)
            "
          >
            <div v-if="scope.row.isExamination == 0" style="color: #a51d1b">
              未获证
            </div>
            <div
              v-else-if="scope.row.isExamination == 1"
              style="color: #3b9a66"
            >
              获证
            </div>
            <div
              v-else-if="scope.row.isExamination == 2"
              style="color: #f5c73c"
            >
              缺考
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="name" width="55">
        <template #default="scope">
          {{ getGenderByIdCard(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" width="180">
        <template #default="scope">
          {{ field_format(scope.row, "identityCard") }}
        </template>
      </el-table-column>
      <el-table-column label="所在企业名称" width="200" show-overflow-tooltip>
        <template #default="scope">
          {{ field_format(scope.row, "enterprise") }}
        </template>
      </el-table-column>
      <el-table-column label="累计工作年限" width="110" show-overflow-tooltip>
        <template #default="scope">
          {{ field_format(scope.row, "workYears") }}
        </template>
      </el-table-column>
      <el-table-column label="最高学历" width="165" show-overflow-tooltip>
        <template #default="scope">
          {{ field_format(scope.row, "education") }}
        </template>
      </el-table-column>
      <el-table-column label="毕业专业" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ field_format(scope.row, "graduationMajor") }}
        </template>
      </el-table-column>
      <el-table-column label="就业状态" width="80">
        <template #default="scope">
          {{ field_format(scope.row, "employed_Status") }}
        </template>
      </el-table-column>
      <el-table-column label="联系地址" width="400">
        <template #default="scope">
          {{ contact_address_format(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="班级备注" width="250" />
      <el-table-column
        label="报名所属"
        width="150"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <dictSelect
            v-model="scope.row.affiliation"
            dictCode="registration_affiliation"
            readonly="1"
          ></dictSelect>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="tableParams['total']"
      :total="tableParams['total']"
      v-model:page="formInline.pageIndex"
      v-model:limit="formInline.pageSize"
      @pagination="getInfo"
    />

    <el-dialog
      v-model="dialogVisible"
      title="学员信息"
      width="600"
      :before-close="handleClose"
    >
      <el-form
        :model="userInfo"
        label-width="120px"
        class="studentLabel"
        label-suffix=":"
      >
        <el-form-item label="姓名" v-if="userInfo.name">{{
          userInfo.name
        }}</el-form-item>
        <el-form-item label="联系方式" v-if="userInfo.mobile">{{
          userInfo.mobile
        }}</el-form-item>
        <el-form-item label="身份证号" v-if="userInfo.identityCard">{{
          userInfo.identityCard
        }}</el-form-item>
        <el-form-item label="电子邮箱" v-if="userInfo.email">{{
          userInfo.email
        }}</el-form-item>
        <el-form-item label="最高学历" v-if="userInfo.education">{{
          userInfo.education
        }}</el-form-item>
        <el-form-item label="毕业专业" v-if="userInfo.graduationMajor">{{
          userInfo.graduationMajor
        }}</el-form-item>
        <el-form-item label="累计工作年限" v-if="userInfo.workYears">{{
          userInfo.workYears
        }}</el-form-item>
        <el-form-item label="所在企业名称" v-if="userInfo.enterprise">{{
          userInfo.enterprise
        }}</el-form-item>
        <el-form-item label="所在企业税号" v-if="userInfo.enterpriseTax">{{
          userInfo.enterpriseTax
        }}</el-form-item>
        <el-form-item
          label="学员所在区属"
          v-if="userInfo.enterpriseJurisdiction"
          >{{ userInfo.enterpriseJurisdiction }}</el-form-item
        >
        <el-form-item label="身份证" v-if="userInfo.identityCard">{{
          userInfo.identityCard
        }}</el-form-item>
        <el-form-item
          label="学员身份证"
          v-if="userInfo.identification_scancopy"
        >
          <div
            v-for="(item, index) in type_format(
              userInfo.identification_scancopy
            )"
            :key="index"
          >
            <el-image
              :src="item.path ? item.path : item"
              v-if="isImageUrl(item)"
            />
            <view v-else style="margin-right: 15px">
              <el-link
                type="primary"
                :href="item.path ? item.path : item"
                target="_blank"
                >身份证附件{{ index + 1 }}</el-link
              >
            </view>
          </div>
        </el-form-item>
        <el-form-item label="毕业证书" v-if="userInfo.certificate_scancopy">
          <div
            v-for="(item, index) in type_format(userInfo.certificate_scancopy)"
            :key="index"
          >
            <el-image
              :src="item.path ? item.path : item"
              v-if="isImageUrl(item)"
            />
            <view v-else style="margin-right: 15px">
              <el-link
                type="primary"
                :href="item.path ? item.path : item"
                target="_blank"
                >毕业证书附件{{ index + 1 }}</el-link
              >
            </view>
          </div>
        </el-form-item>
        <el-form-item label="报名所属" v-if="userInfo.affiliation">{{
          userInfo.affiliation.toString()
        }}</el-form-item>
        <el-form-item label="当前就业状态" v-if="userInfo.employed_Status">{{
          userInfo.employed_Status
        }}</el-form-item>
        <el-form-item label="毕业院校" v-if="userInfo.school">{{
          userInfo.school
        }}</el-form-item>
        <el-form-item
          :label="item.title"
          v-if="userInfo.relationList && userInfo.relationList.length"
        >
          <div v-for="(item, index) in userInfo.relationList" :key="index">
            <div v-if="item.type == 'image'">
              <img :src="item.value" alt="" />
            </div>
            <div v-else-if="['templateFile', 'file'].includes(item.type)">
              <div v-if="proxy.$utils.isString(item.value)">
                <div v-for="(el, idx) in item.value.split(',')" :key="idx">
                  <el-image
                    :preview-src-list="previewList(item.value.split(','))"
                    style="width: 100px; height: 100px; margin-top: 10px"
                    :src="el.path ? el.path : el"
                    v-if="isImageUrl(el)"
                  />
                  <el-link type="primary" v-else :href="el" target="_blank"
                    >附件{{ idx + 1 }}</el-link
                  >
                </div>
              </div>
              <div v-else-if="proxy.$utils.isArrayOrJsonArray(item.value)">
                <div v-for="(el, idx) in item.value" :key="idx">
                  <el-image
                    :preview-src-list="previewList(item.value)"
                    :initial-index="0"
                    style="width: 100px; height: 100px; margin-top: 10px"
                    :src="el.path ? el.path : el"
                    v-if="isImageUrl(el)"
                  />
                  <el-link
                    type="primary"
                    v-else
                    :href="el.path ? el.path : el"
                    target="_blank"
                    >附件{{ idx + 1 }}</el-link
                  >
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 预览证书 -->
    <uploadImage ref="uploadImageRef" v-show="false"></uploadImage>
  </div>
</template>

<script setup lang="ts">
import offlineStudents from "@/views/courseManage/components/offlineStudents.vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();

let dialogVisible = ref(false);
let formInline = ref({
  name: "",
  mobile: "",
  classId: "",
  type: "current",
  identityCard: "",
  enterprise: "",
  workYears: "",
  education: "",
  graduationMajor: "",
  affiliation: "",
  isExamination: null,
  pageIndex: 1,
  pageSize: 50,
  examType: null,
});
let tableParams = ref({});
let loading = ref(false);
let workYears = ref(
  "应届毕业年,不满1年,满1年,满2年,满3年,满4年,满5年,满6年,满7年,满8年,满9年,满10年及以上"
);
let userInfo = ref({});
let searchHeight = ref(0);

let tableHeight = computed(() => {
  console.log("searchHeight.value", searchHeight.value);
  let hei =
    window.innerHeight - 84 - counter.pageHeight - 90 - searchHeight.value;
  return `${hei}px`;
});

onMounted(() => {
  getInfo();
  searchHeight.value = proxy.$refs.searchRef.offsetHeight;
});

function handleClose() {
  dialogVisible.value = false;
}

function showActive(e) {
  let { status } = e;
  return status != 2;
}

function init() {
  formInline.value = {
    name: "",
    mobile: "",
    classId: "",
    type: "current",
    identityCard: "",
    enterprise: "",
    workYears: "",
    education: "",
    graduationMajor: "",
    affiliation: "",
    pageIndex: 1,
    pageSize: 50,
    isExamination: null,
    examType: null,
  };
  getInfo();
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.index == 0) {
    formInline.value.type = "current";
  } else if (tab.index == 1) {
    formInline.value.type = "history";
  } else {
    formInline.value.type = "offline";
  }
  formInline.value.pageIndex = 1;
  getInfo();
};

function isImageUrl(el) {
  let a = el.path ? el.path : el;
  if (a.includes(".jpg") || a.includes(".png") || a.includes(".jpeg"))
    return true;
  return false;
}

function type_format(e) {
  if (proxy.$utils.isString(e)) return e.split(",");
  return e;
}

function previewList(array) {
  let arr = [];
  array.forEach((element) => {
    let a = element.path ? element.path : element;
    if (isImageUrl(a)) arr.push(a);
  });
  return arr;
}

async function getInfo() {
  try {
    loading.value = true;
    tableParams.value = await proxy.$apis.classStudentManage({
      data: formInline.value,
    });
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function showUserInfo(row) {
  userInfo.value = row.source ? row.user_data : row.order_Info.orderUserInfo;
  dialogVisible.value = true;
}

function field_format(item, key) {
  let row = item.source ? item.user_data : item.order_Info.orderUserInfo;
  if (key == "enterprise") return counter.showEnterprise(row, key);
  return row[key];
}

function getGenderByIdCard(item) {
  let row = item.source ? item.user_data : item.order_Info.orderUserInfo;
  let idCard = row.identityCard;
  if (!idCard || idCard.length !== 18) return "-";
  const sexCode = idCard.charAt(16);
  const gender = parseInt(sexCode, 10) % 2 === 0 ? "女" : "男";
  return gender;
}

function toClassPro(row) {
  if (proxy.$utils.isJsonArray(row.signIn_data) == "jsonArr") {
    let arr = [...row.signIn_data];
    let list = [];
    let owner = [];
    arr.forEach((element) => {
      if (element.userId == row.userId && element.hasOwnProperty("status")) {
        owner.push(element);
      }
    });
    owner.forEach((element) => {
      if (element.status == 1) {
        list.push(element);
      }
    });
    return ((list.length / owner.length) * 100).toFixed(2) + "%";
  } else {
    return 0;
  }
}

function contact_address_format(row) {
  if (row.B3_data) {
    for (let index = 0; index < row.B3_data.length; index++) {
      const element = row.B3_data[index];
      if (element.userId == row.userId) {
        return element.address;
      }
    }
  } else {
    return "-";
  }
}

function onSubmit() {
  formInline.value.pageIndex = 1;
  getInfo();
}

watch(
  () => [formInline.value.classId, formInline.value.affiliation],
  (newValue, oldValue) => {
    if (newValue) onSubmit();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss">
.class-tabs {
  width: 100%;
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
.studentLabel {
  .el-form-item__label {
    font-weight: bold !important;
  }
}
</style>
<style lang="scss" scoped>
.container {
  margin: 20px;
  .name {
    color: var(--el-color-primary);
    cursor: pointer;
  }
  .className {
    color: #cb6327;
    cursor: pointer;
  }
  .source {
    border: 1px solid var(--el-color-primary);
    border-radius: 50%;
    padding: 3px;
    margin-left: 3px;
  }
  .el-form {
    max-height: 60vh;
    overflow-y: auto;
  }
  .classStatus {
    border-radius: 50%;
    margin-left: 5px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #97999e;
    border: 1px solid #97999e;
    cursor: pointer;
  }
  .active {
    color: #3fcf66 !important;
    border: 1px solid #3fcf66 !important;
  }
}
</style>
